{% extends 'base2.html' %}
{% block content %}

    <h3 class="common_title">确认收货地址</h3>

    <div class="common_list_con clearfix">
        <dl>
            <dt>寄送到：</dt>
            <dd><input type="radio" name="" checked="">{{ info }}</dd>
        </dl>
        <a href="/user/user_site/" class="edit_site">编辑收货地址</a>

    </div>

    <h3 class="common_title">支付方式</h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_style" checked value="cash">
            <label class="cash">货到付款</label>
            <input type="radio" name="pay_style">
            <label class="weixin">微信支付</label>
            <input type="radio" name="pay_style" value="zfb">
            <label class="zhifubao"></label>
            <input type="radio" name="pay_style">
            <label class="bank">银行卡支付</label>
        </div>
    </div>

    <h3 class="common_title">商品列表</h3>

    <div class="common_list_con clearfix">
        <ul class="goods_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>
        {% for cart in clist %}
            <ul class="goods_list_td clearfix">
                <input type="hidden" name="cid" value="{{ cart.id }}">
                <li class="col01">{{ forloop.counter }}</li>
                <li class="col02"><img src="/static/images/{{ cart.goods.gpic }}"></li>
                <li class="col03">{{ cart.goods.gtitle|truncatechars:'10' }}</li>
                <li class="col04">{{ cart.goods.gunit }}</li>
                <li class="col05">{{ cart.goods.gprice }}元</li>
                <li class="col06">{{ cart.count }}</li>
                <li class="col07">{{ cart.amount }}元</li>
            </ul>

        {% endfor %}

    </div>

    <h3 class="common_title">总金额结算</h3>

    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_goods_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_price }}元</b></div>
            <div class="transit">运费：<b>10元</b></div>
            <div class="total_pay">实付款：<b>{{ final_price }}元</b></div>
        </div>
    </div>

    <div class="order_submit clearfix">
        <a href="javascript:;" id="order_btn">提交订单</a>
    </div>


    <div class="popup_con">
        <div class="popup">
            <p>订单提交成功！</p>
        </div>

        <div class="mask"></div>
    </div>

    <script type="text/javascript">
        $('#order_btn').click(function () {
            //获取支付方式，即获取pay_style_con底下被checked的标签
            let pay_style = $('.pay_style_con :checked').val();//支付方式
            let cids = [];  //用一个空列表cids遍历我们写的隐藏的input里的商品id
            $('.goods_list_td input').each(function () {
                cids.push($(this).val())
            });
            //将所有购物车对象的id放入数组中

            //接着发一个ajax，把用户选中的商品id和支付方式传出去
            $('.popup_con').fadeIn('fast', function () {

                setTimeout(function () {
                    $('.popup_con').fadeOut('fast', function () {
                        $.ajax({
                            url: '/order/do_order/',
                            traditional: true,
                            type: 'get',
                            data: {'cid': cids,'pay_style': pay_style},
                            dataType: 'json'
                        }).done(function (data) {
                            if (data.res === 0) {
                                window.reload();
                            } else if (data.res === 1) {
                                location.href = '/user/info/'
                            } else {
                                window.open(data.pay_url)
                            }
                        })
                    });
                }, 3000)

            });
        });
    </script>


{% endblock %}